/*
 * FileName: 项目经历组件
 * Created Date: 2022-10-18 14:39:31
 * Author: 文初阳
 * -----
 * Last Modified: 2022-10-18 14:39:31
 * Modified By: 文初阳
 */

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import React from 'react';
import styles from './ProjectExperiences.module.scss';

const { TextArea } = Input;

const ProjectExperiences: React.FC = () => {
    return (
        <div className={styles.wrapper}>
            <h1>项目信息</h1>
            <Form.List name="projectExperiences">
                {(fields, { add, remove }, { errors }) => (
                    <div className={styles.itemWrapper}>
                        {fields.map(({ key, name, ...restField }) => (
                            <div className={styles.item} key={key}>
                                <div className={styles.top}>
                                    <Form.Item {...restField} noStyle name={[name, 'title']}>
                                        <Input placeholder="主标题，如：x项目" />
                                    </Form.Item>
                                    <Form.Item {...restField} noStyle name={[name, 'summary']}>
                                        <Input placeholder="副标题，如：x技术/主负责人/策划" />
                                    </Form.Item>
                                    <Form.Item {...restField} noStyle name={[name, 'image']}>
                                        <Input placeholder="图片地址，上传其它图床后传入图片地址" />
                                    </Form.Item>
                                    <MinusCircleOutlined
                                        className={`dynamic-delete-button ${styles.iconDelete}`}
                                        onClick={() => remove(name)}
                                    />
                                </div>
                                <div className={styles.detailWrapper}>
                                    <div className={styles.detailTitle}>项目内容细节：</div>
                                    <Form.List name={[name, 'detail']}>
                                        {(
                                            detailFields,
                                            { add: addDetail, remove: removeDetail },
                                            { errors: detailErrors }
                                        ) => (
                                            <div className={styles.detailItemWrapper}>
                                                {detailFields.map(
                                                    ({ key: detailKey, name: detailName, ...restField }) => (
                                                        <div className={styles.detailItem} key={detailKey}>
                                                            <div className={styles.label}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[detailName, 'label']}
                                                                    noStyle
                                                                >
                                                                    <Input placeholder="标题，如：技术栈" />
                                                                </Form.Item>
                                                                <MinusCircleOutlined
                                                                    className={`dynamic-delete-button ${styles.iconDelete}`}
                                                                    onClick={() => removeDetail(detailName)}
                                                                />
                                                            </div>
                                                            <div className={styles.value}>
                                                                <Form.Item
                                                                    {...restField}
                                                                    name={[detailName, 'value']}
                                                                    noStyle
                                                                >
                                                                    <TextArea
                                                                        rows={3}
                                                                        placeholder="内容，如：使用了React框架。可使用‘<cb> 蓝色强调 </cb>’ 和 ‘<cr> 红色强调 </cr>’ 来做强调"
                                                                    />
                                                                </Form.Item>
                                                            </div>
                                                        </div>
                                                    )
                                                )}
                                                <Form.Item noStyle>
                                                    <Button
                                                        type="dashed"
                                                        onClick={() => addDetail()}
                                                        style={{
                                                            width: '48%',
                                                        }}
                                                        icon={<PlusOutlined />}
                                                    >
                                                        新增一条项目细节描述
                                                    </Button>
                                                    <Form.ErrorList errors={detailErrors} />
                                                </Form.Item>
                                            </div>
                                        )}
                                    </Form.List>
                                </div>
                            </div>
                        ))}
                        <Form.Item noStyle>
                            <Button
                                type="dashed"
                                onClick={() => add()}
                                style={{
                                    width: '60%',
                                }}
                                icon={<PlusOutlined />}
                            >
                                新增一条项目
                            </Button>
                            <Form.ErrorList errors={errors} />
                        </Form.Item>
                    </div>
                )}
            </Form.List>
        </div>
    );
};
export default ProjectExperiences;
